<template>
  <div id="app">
    <hb-head :headback="false" headfont="登录"></hb-head>
    <div class="mui-content">
      <form id='login-form' class="mui-input-group">
        <div class="mui-input-row">
          <label>手机号</label>
          <input id='phone' type="number" v-model="phone" pattern="\d*" class="mui-input-clear mui-input" placeholder="请输入手机号码">
        </div>
        <div class="mui-input-row">
          <label>验证码</label>
          <input id='verify' type="number" v-model="verify" pattern="\d*" class="mui-input" placeholder="请输入验证码">
          <div id="sendMessage">
            <button @tap="sendSMS" type="button" data-loading-text="120s" data-loading-icon="" class="mui-btn mui-btn-danger mui-btn-outlined">发送验证码</button>
          </div>
        </div>
      </form>
      <div class="mui-content-padded">
        <button id='login' class="slg mui-btn mui-btn-block mui-btn-outlined mui-btn-danger" @click="login">登录</button>
        <!--<div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
    				</div>-->
      </div>
      <div class="oauth-area">
  
      </div>
    </div>
  </div>
</template>

<script>

import { ajax , userSettings } from 'assets/js/Lib';

import HbHead from 'components/HbHead';

let setting = userSettings.getSettings();

export default {
  data() {
    return {
      phone: setting.phone,
      verify: '',
//      authCode: '',
    }
  },
  computed: {
    
  },
  components: {
    HbHead
  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate() {

  },
  //在挂载开始之前被调用
  beforeMount() {

  },
  //已成功挂载，相当ready()
  mounted() {
    // mui('#autoLogin').switch()
    mui.init({
      statusBarBackground: '#f7f7f7'
    })

//    let params = url('?');
//
//    if (!params || params.state != 'wxauthok') {
//      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http://gzfhxxkj.com/views/login.html&response_type=code&scope=snsapi_base&state=wxauthok#wechat_redirect'
//    } else {
//      this.authCode = params.code;
//    }
  },
  //相关操作事件
  methods: {
    sendSMS: function (e) {
      let $this = mui(e.currentTarget);
      let phone = this.phone;
      let verify = this.verify;

      // if (!(/^1[3|5][0-9]\d{4,8}$/.test(phone))) {
      //   mui.toast('手机号码有误')
      //   return
      // }

      var sendData = {
        phone: phone
      };

      $this.button('loading')
      ajax({
        url: '/api/public/sendsms',
        type: 'GET',
        data: sendData
      })
      let currentTime = 120
      let timeout
      timer();

      function timer() {
        if (currentTime > 0) {
          currentTime--
          timeout = setTimeout(timer, 1000)
          $this[0].innerText = currentTime + 's'
        } else {
          clearTimeout(timeout)
          currentTime = 120
          $this.button('reset')
        }
      }
    },
    login: function (e) {
      let sendData = {
        account: this.phone,
        verify: this.verify,
//        authCode: this.authCode,
      };

      ajax({
        url: '/api/public/login',
        type: 'POST',
        data: sendData,
        showLoading: true,
        success: function(res) {
          setting.token = res.token
          setting.phone = res.user.phone
          userSettings.setSettings(setting)
          localStorage.removeItem('$userData')

          const lastPage = JSON.parse(localStorage.getItem('$needloginpage') || '{"id": "home", "url": "home.html"}')
          
          window.toPage(lastPage)
        }
      })
    }
  }
}
</script>

<style lang="less">

body{
	background: #fff !important;
	height: 100% !important;
	color: #444;
	padding: 0;
	margin: 0;
	font-size: 14px;
}

.mui-content {
	background: #fff !important;
}

.mui-progressbar.mui-progressbar-in.mui-progressbar-infinite:before{
  background: #dd524d;
}

.mui-content {
  height: 100%;
  .mui-input-group {
    margin-top: 10px;
    &:first-child {
      margin-top: 20px;
    }
    label {
      width: 82px
    }
    .mui-input-row {
      padding: 5px 0 5px 0;
      height: 50px;
    }
  }
}

.area {
  margin: 20px auto 0px auto;
}

.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
  width: 73%;
  float: left !important;
}

#phone~.mui-icon {
  padding-top: 4px;
}

#verify {
  width: 118px;
}

.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
  top: 6px;
}

#sendMessage {
  position: absolute;
  width: 25%;
  right: 10px;
  top: 6px;

  button {
    width: 103px;
  }
}

.mui-btn {
  padding: 10px;
  &.slg {
    padding: 10px 0;
  }
}

.link-area {
  display: block;
  margin-top: 25px;
  text-align: center;
}

.spliter {
  color: #bbb;
  padding: 0px 8px;
}

.mui-content-padded.oauth-area {
  margin-top: 25px;
}

.oauth-area {
  position: absolute;
  bottom: 20px;
  left: 0px;
  text-align: center;
  width: 100%;
  padding: 0px;
  margin: 0px;
  .oauth-btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: 30px 30px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px 20px;
    /*-webkit-filter: grayscale(100%); */
    border: solid 1px #ddd;
    border-radius: 25px;

    &:active {
      border: solid 1px #aaa;
    }

    .disabled {
      background-color: #ddd;
    }
  }
}
</style>
